開始之前先送上菜雞的code

這是我第一次實作ＲＷＤ的網頁，又因為最近同步在看Bootstrap。
所以起初覺得很簡單，畢竟Bootstrap打一下md或lg，好像就能通通搞定似的...

結果這一星期被那些width的％啦flex的column啦barabara啦摧殘到不成人形。
隨便看到路上的阿姨都想跟她說：我不想努力了！！！！

但開始這個日記就是想記錄我慢慢進步的過程，順便幫自己做些筆記。
就不多說了，開始吧。

之前做單頁式網頁，其實都蠻土法煉鋼的，就照著header,content再到footer從上到下一個一個的寫。
但練習了Bootstrap之後覺得有模組化真的蠻方便。

所以也初次想要自己組個模組來實踐這次的網頁。

這就是我的第一個難題！
首先是font-size要怎麼規劃，試了幾種方法。
第一次使用8的倍數進位，32px的字就是font-4、40px的字就是font-5以此類推。
但在做響應式時就遇到問題了，字體在不同頁面大小會有變化，結果字型也未必是8的倍數了...
那時候真的很想矇著良心就這樣繼續把頭洗下去，但到後面實在是越來越複雜...

最後得出的結論就是用sm m lg的方式去幫字體建立模組，直接看code時也相對語意話。
在後面改大小時，心情上也愉悅很多！！

在看到助教分享的共同設定時，真的是相見恨晚阿...
希望下週作業能好好的把模組建構好，不要再浪費太多時間打轉了！

以下是我的共同設定筆記

1.共同設定
把字體最好規劃，省得後面還要一個一個打字體。
和一些圖片的大小也統一整理，免除後面還要一個一個打的情況。
我自己也會先把a連結的style都拿掉。

*, *::before, *::after{
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}
img{
    display:block;
    max-width:100%;
    height:auto; 
}

2.容器高度
max-width是在RWD時會用到的方式

.container {
    max-width:1200px;
    margin: 0 auto;
}

3.文字大小
用語易化的方式命名大小，閱讀性佳也更方便在之後做修改。

.h1{
    fonst-size: 
}
.h2{
    font-size:
}
.h3{
    font-size:
}
.h4{
    font-size:
}
.h5{
    font-size:
}
.h6{
    font-size:16px;
}


.font-sm{
    font-size:
}
.font-m{
    font-size:
}
.font-lg{
    font-size:
}

4.色彩
使用語易化的命名
主要色（明暗變化）、強調色（次要色、重要、執行關鍵)
primary主色
secondary次要色
warning警告
danger危險

.text-primary {
   color: blue;
}
.bg-light{
}

希望下次能更好的運用模組化，好好解決腦袋混亂的問題！！

再來第二個難題就是RWD了。
看頁面很簡單，但要做好RWD真的要注意好多細節。
第一關就被圖片卡關很久...才想起來要用％數去處理寬度。整個豁然開朗起來

%和flex的運用真的可以很快做出圖片列表，文字列表的RWD版型！

但這次在寫作業時也遇到了不同ul的排版在縮小時要併排在一起
頓時不知道該怎麼處理...
我的方法是又塞了一個只在md大小時會出現的code
導致我的程式碼在footer的地方非常混亂

還在思考這部分的解決辦法...希望之後能有機會再跟大家分享